The first aspect of application distribution is the build process, and as mentioned in the previous
lesson, we'll be using the electron build a module for this.
The module offers two implementations, a programmatic API for scripting your bolts and a command line
interface will be focusing on the latter.
I've linked to this project page in the lesson resources.
Step one then is to install the electron, the tools to have the electron build a command line interface
available everywhere.
You'll have to install it globally with NPM, install G four global electron builder, which I already
have on my machine.
This way you'll be able to call commands directly from the terminal with the electron, build a command,
for example, electron builder with a help flag which prints out the help documentation for the command
line tools.
Alternatively, you can also install it locally for the project itself.
This way, however, you will have to call the electron a command using NPM.
Just something to be aware of as we'll see an example in a second.
As before, though, if your project is going to be built by more than one developer, I'd recommend
making sure you add electron builder as a development dependency.
I'll do that with NPM I Capital D flag to mark this as a development dependency.
Electron builder enter.
And done check package, Jason, there, the electron ball module is added as a dev dependency.
So with that done, we can now add a script to this package, Dodgson file in order to access this local
version of Electron Balde.
Remember, only the global install is accessible from the command line, not this local version.
For that reason, we have to run it via AMPM.
Another important note is that if you're on windows, there's local install will most likely not work
either, and you'll have to install electron balde globally.
Not always the case, but worth noting, I'll add a script command called Bould on which I'll have NPM
execute Electron Baldor with a help flag just to test save execute that project script with NPM Run.
Build the name of the script which outputs the same help menu as we saw earlier when accessing the global
install directly from the command line.
Right, with that out of the way, let's see a basic bold command on the electron ball that docks navigate
to the command line interface section.
Where we see all the available commands and respective flags for those commands, the default command
being bold here and to specify a single platform or target, we can add any of these flags, Mack Win
or Linux over to the terminal.
Remember, I have electron balde installed globally.
So to build the app, I'll run electron builder bold, although this is the default command.
So we can also just leave it out.
Mac, to build this for Mac only or when to bolt for windows.
We can also use shorthand flags here.
M for Mac, W for Windows or L for Linux.
If you leave this platform flag out, Electron Boulder will default to the operating system being built
on.
And lastly, we can specify the target or type of ball to create, for example, zip being a zip file
of the Mac app.
Other targets might include a DMG disk image or an installer for Windows.
Seeing as I'm demonstrating this from a Mac, then let's see how to build this for Mac as a zip file.
Before I go ahead with this very importantly, note that whilst we can build for Windows, Mac and Linux
on Mac, we can only build four Windows and Linux on Windows.
Just important to be aware of.
Should you need to build for Mac from a Windows machine?
A third party solution like Advair does exist.
To do this for you, you can find a link to activate in the lessened resources.
OK, back to this bold command.
I'll run this.
And immediately, there's a couple of warnings, the first being application icon not set and the second
cannot find a signing certificate or Apple developer ID, meaning the build won't be signed, something
we'll address in the next lesson.
I'll fast forward through this there.
We should now have a packaged version of our app for Mac in ZIP format list the contents of this project
there.
This dust directory is where Electron Baldor writes out our targeted bolds, which if I expand this
in my editor, contains and unpacked version of the Mac up some auxiliary files generated by the build
process.
And lastly, our targeted zip file with the app.
I'll bring the project into view.
Navigate to the new test directory where we see the packaged up in zip format and most importantly,
this Mac directory, which contains the unpackaged version of our built up specifically for testing
Bolds Electron, Baldor will generate one such directory with an unpacked build for each platform you
build for navigate to this Mac directory.
There we have an app, albeit with the electron app icon, seeing as we didn't provide any icons for
our app.
Run this.
And we get a standalone up note, however, that there's a few things we still need to update, the
app icon being one, the app name, which is being taken from the package adjacent file at the moment,
hiding the dev tools and finally will need to sign this app in order to have it work on other machines.
So let's do the first few now.
We'll tackle code signing in the next lesson.
Quit this.
I'll get rid of this entire dust directory for now and start by updating our apps name.
As mentioned, Electron Balde takes this from the package Dogz on file here I'll update this to read
it next week and remove calls to open the dev tools.
We only have one instance of this in Maine always.
Yeah, remove the open dental to school as per this comment.
This package, though, Jason Fowler can do with a few updates, make the apt description master electron
project a bit more accurate at a home page field, in my case, will just be the same as the repo.
And a single author, there's no longer being the QuickStart project, right, that should do so, the
next step then is to add up icons.
I've created a very simple icon image, which I'll move into the project directory there, a ten, twenty
four by ten, twenty four square image to use for generating app icons.
The size of the initial icon image isn't too important as long as it's large enough to create high resolution
icons from 10.
24 is a safe size.
You can find this image in the lesson resources should you want to use it.
OK, having this icon image, we now need to create Mac, Windows and Linux specific icons as each platform
require different icon formats.
This is again a task you can achieve with a number of online services or even with an image editing
application.
The way you create these icons doesn't matter.
So what I'll use is cloud convert.
This allows us to generate all the required formats in one go.
I'll select that icon image icon DOT PMG converting for Mac and image type of icons.
Icons files contain a number of different image sizes bundled into one, and is the native icon format
used by all Mac apps.
Then for Windows, I'll add another conversion, same icon file converting to an image type of Icko
the native Windows icon format.
I'll also configure this to be a 256 by 256 icon just to keep the icon resolution a bit higher.
And that's it.
Lennix will just use the icon image as is in PNG format start conversion.
And done download these two icons for Mac and for Windows, that's all the icons we need.
So move those downloaded icons into the project directory and by default, Electron Electron is going
to look for app assets in a directory called Pulled.
So create that, placing all three icon files in that bill directly.
This way we don't need to configure anything electronically that will just find the correct image for
the world by itself.
So having updated the app name and icons, let's try that same build again.
Enter.
No more no more icon warnings, but still this certificate issue, that's for the next lesson, though,
fast forward and done it back to that recreated test directory.
And there our app is now named correctly with the icon, we've had it launched this.
And same, we have the name in this first match, specific menu in the about menu item and at the top
of the app window, our app is now essentially ready and we can start configuring electron balde for
each platform.
So over to the docs, navigate to this configuration link.
Where we get a very good breakdown of common configuration settings being settings that apply to all
platforms, file patterns with which you can change the directory to kibbled assets in etc, and platform
specific configurations, Mac, Windows and Linux, with each platform containing individual configuration
sections for it's available targets.
I'll start with the required common fields.
As with the app name, Electron Builder will check the package, not JSON file for a bold configuration
being a JSON configuration on the bulb key.
Alternatively, you can also create a separate YAML file and tell electron builder where to find it
when running the command.
But I'll stick to the first option over to our package on file.
Add a new key build on which we can now specify configuration options for electron builder, the first
of which is the app ID for anyone that's built an app before.
This should be familiar.
It's a unique identifier for your app in reverse domain notation and is the same for all platforms.
In my case, com dot steck academy dot reedit.
So app name developer or organization dotcom, this format isn't a strict requirement, but it's the
standard recommendation by all platforms, also set the copyright property.
This will be used in various places depending on the operating system.
Copyright Stake Academy DOT TV.
And finally, a platform specific property for each of the supported platforms, Mac.
Windows when?
And Linux.
On these, we can now set platform configurations, for example, in the docks, we have Mac options
for any target, options for DMG images, the Mac App Store and an installer package format.
Same for Windows and Linux with its available app formats.
I'll navigate to the common Mac settings.
They're the up category, the targets we want to build for or even a custom icon which defaults to bold
icon icons exactly as we have it, I'll start by setting this category, this link here being all the
available Mac app categories navigate to that.
Not that many, so pick whichever one of these is most accurate for your app, I'll say productivity,
copy the category, duty or unique identifier.
Sitting in the map configuration, category two, that UTIs string.
Then we can specify which targets we want compiled when building for Mac, any of these here.
Target DMG, as we've not seen that save this to test.
Electron builder for Mac, and this time having specified our target as a DMG image in the configuration,
I'll remove this zip target from the command center fast-Forward.
Through this, we see the DMG now being built instead of the zip target that's done.
So check the disk directly.
Here we have the DMG Redit version 1.0 DMG on Mount That Image.
And we get this really nice desk image window where the app can be dropped straight into our applications
directory, you'll also find further configuration settings under the DMG target to change everything
from the window size, the background color or even a custom background image.
Next, let's build the app for Windows and Linux as well over to the Windows documentation.
We don't have a category here, but I'll add a target from these available ones.
Setting, as with the misconfiguration target, Zipp.
Then to the Linux docks, this one does have a category and several other possible fields, like, for
example, overwriting the default description set in the package that Jason file the name of the executable
file that will be created and many more.
I'll set the category for now navigate to this link application category where we have available the
categories.
Utility probably best suits the reader app.
So set on the Linux key category utility.
I leave the target configuration to the default, which is a standard Linux app image and a bolt for
the Linux.
SNAP or delete all the previous bolts before running this again.
Calling electron builder M w ell, so Mac, Windows and Linux.
And at this point, you might see some binaries being downloaded for each platform that's already done
on my machine, though, I'll forward through this.
And there we can see each bullet that happened, the DMG for Mack first, as specified in our bold configuration,
a snap image for the Linux snap store as part of the default.
The next target's the app image also for Linux and the Windows zip file.
Check the district directory.
Where we have the DMG as before, the Linux image and the SNAP stoep.
And inside of this window, zip file.
Read it.
So that covers the basics of building with electron builder and as you can see, there's a lot of configuration
options available to tailor your bolts exactly the way you need them.
In the next lesson, we'll see how to code sign our up.